<template>
	<div>
		<view class="es-agreement" @tap="onCheck">
			<view class="es-agreement__radio" :style="{border: '2rpx solid ' + (checked?activeColor:color),background:checked?activeColor:'transparent'}" >
				<text v-if="checked" class="esfont" style="font-size: 16rpx;color:#ffffff">&#xe700;</text>
			</view>
		
			<text class="es-agreement-text ml10" :style="{color:color}">我已阅读并同意</text>
			<text class="es-agreement-text" :style="{color:hrefColor}" v-if="userHref" @tap.stop="toHref('用户协议',userHref)">《用户协议》</text>
			<text class="es-agreement-text" :style="{color:hrefColor}" v-if="privacyHref" @tap.stop="toHref('隐私政策',privacyHref)">《隐私政策》</text>
			<text class="es-agreement-text mt20" :style="{color:hrefColor}" v-if="juniorHref" @tap.stop="toHref('儿童/青少年个人信息保护规则',juniorHref)">《儿童/青少年个人信息保护规则》</text>
		</view>
		
		<view class="w750 mt30"  :style="{height:(bottomHeight==0?10:bottomHeight)+'px'}"></view>
			
		<es-bottom-popup :show="showDialog" title="用户协议及隐私保护" @close="showDialog = false">
			<view class="flex-center flex-column">
				<view class="es-popup__bar" ></view>
				<text class="es-popup__title">用户协议及隐私保护</text>
				
				<view class="es-agreement mt30">
					<text class="es-agreement-text ml10" style="color: #666666;">我已阅读并同意</text>
					<text class="es-agreement-text" :style="{color:hrefColor}" v-if="userHref" @tap.stop="toHref('用户协议',userHref)">《用户协议》</text>
					<text class="es-agreement-text" :style="{color:hrefColor}" v-if="privacyHref" @tap.stop="toHref('隐私政策',privacyHref)">《隐私政策》</text>
					<text class="es-agreement-text mt20" :style="{color:hrefColor}" v-if="juniorHref" @tap.stop="toHref('儿童/青少年个人信息保护规则',juniorHref)">《儿童/青少年个人信息保护规则》</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="es-login-btn" :style="{background:loginBg}" @tap="confirm">
					<text class="es-login-btn__text" :style="{color:loginColor}">同意并登录</text>
					<button  class="es-login-button" open-type="getUserInfo" @getuserinfo="confirm"></button>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP -->
				<view class="es-login-btn" :style="{background:loginBg}" @tap="confirm">
					<text class="es-login-btn__text" :style="{color:loginColor}">同意并登录</text>
				</view>
				<!-- #endif -->
				<view class="flex-center mt50" @tap="showDialog = false">
					<text class="es-agreement-text"  style="color: #999999;">不同意</text>
				</view>
				<view class="w750" :style="{height:(bottomHeight==0?10:bottomHeight)+'px'}"></view>
			</view>
		
		</es-bottom-popup>
	</div>
</template>

<script>
	import esBottomPopup from '/components/es-bottom-popup/es-bottom-popup'
	export default {
		components:{
			esBottomPopup
		},
		props:{
			//用户协议链接-未配置则不显示
			userHref:{
				type:String,
				default:""
			},
			//隐私协议链接-未配置则不显示
			privacyHref:{
				type:String,
				default:""
			},
			//青少年协议链接-未配置则不显示
			juniorHref:{
				type:String,
				default:""
			},
			// 字体颜色
			color:{
				type:String,
				default:"#ffffff"
			},
			//radio选中颜色
			activeColor:{
				type:String,
				default:"#45D4A8"
			},
			// 协议链接字体颜色
			hrefColor:{
				type:String,
				default:"#54678d"
			},
			//登录按钮背景色
			loginBg:{
				type:String,
				default:"linear-gradient(to right, #47dabd, #45D4A8)"
			},
			loginColor:{
				type:String,
				default:"#ffffff"
			},
			checked:{
				type:Boolean,
				default:false
			},
			loginType:String
		},
		data(){
			return {
				bottomHeight:0,
				showDialog:false
			}
		},
		watch:{
			showDialog(val){
				// this.$emit("change",val);
			}
		},
		created() {
			uni.getSystemInfo({
				success: e => {
					this.bottomHeight = e.screenHeight - e.safeArea.bottom;
				}
			});
		},
		methods:{
			toHref(title,href){
				//todo  可修改代码，直接跳转到webview页面
				this.$emit("href",{
					title,href
				})
			},
			confirm(){
				this.$emit("confirm",this.loginType);
			},
			onCheck(){
				this.$emit("change",!this.checked);
			}
		}
	}
</script>

<style>
	
	.flex-column{
		display: flex;
		flex-direction: column;
	}
	
	.flex-center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.w750{
		width: 750rpx;
	}
	
	.ml10{
		margin-left: 10rpx;
	}
	
	.mt20{
		margin-top: 20rpx;
	}
	
	.mt30{
		margin-top: 30rpx;
	}
	
	.mt50{
		margin-top: 50rpx;
	}
	
	.es-agreement {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.es-agreement__radio {
		width: 28rpx;
		height: 28rpx;
		border-radius: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.es-agreement-text {
		font-size: 25rpx;
		line-height: 25rpx;
	}

	.es-login-btn {
		width: 450rpx;
		height: 96rpx;
		border-radius: 48rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;
		position: relative;
	}
	
	.es-login-button{
		width: 450rpx;
		height: 96rpx;
		border-radius: 48rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: transparent;
	}
	
	.es-login-btn__text {
		font-size: 36rpx;
	}
	
	.es-popup__bar{
		width: 88rpx;
		height: 10rpx;
		background: #666666;
		border-radius: 5rpx;
		margin-top: 30rpx;
	}
	
	.es-popup__title{
		font-size: 40rpx;
		font-weight: bold;
		color: #1E1E1E;
		margin-top: 50rpx;
	}
	
</style>